<template>
    <nut-navbar @click-back="back" title="我的好友">
        <template #left>
            <RectLeft class="left" width="20px" height="20px" color="#1b1b1b"/>
        </template>
        <template #right>
            <Add class="right" width="20px" height="20px" color="#1b1b1b"/>
        </template>
    </nut-navbar>  
    <nut-tabs v-model="tabValue">
        <nut-tab-pane title="关注" pane-key="0">
            <div class="follows" v-for="item in followListData">
                <nut-avatar>
                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ztUt10fQ6GVGvRp3w9tiQgAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                </nut-avatar>
                <div class="user">
                    <nut-row>
                        <span>{{ item.user_name }}</span>
                        <span class="level"> LV.{{ item.level }}</span>
                    </nut-row>
                    <nut-row>{{ item.intro }}</nut-row>
                </div>
            </div>
        </nut-tab-pane>
        <nut-tab-pane title="粉丝" pane-key="1">
            <div class="fans" v-for="item in fanListData">
                <nut-avatar>
                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ztUt10fQ6GVGvRp3w9tiQgAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                </nut-avatar>
                <div class="user">
                    <nut-row>
                        <span>{{ item.user_name }}</span>
                        <span class="level"> LV.{{ item.level }}</span>
                    </nut-row>
                    <nut-row>{{ item.intro }}</nut-row>
                </div>
            </div>
        </nut-tab-pane>
    </nut-tabs>
</template>

<script setup>
import { ref } from 'vue';
import { RectLeft, Add } from '@nutui/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import http from '../../tools/axios';

const router = useRouter()
const route = useRoute()
const back = () => {
    router.push('/mobile/mine');
}
const tabValue = ref(route.query.value);
const userId = localStorage.getItem('userId');
const followListData = ref([]);
const fanListData = ref([]);
const getfollowList = async (userId)=>{
    http.get('/user/follow',{params: {'user_id': userId}}).then((res)=>{
        console.log(res);
        if(res.data.code === 200){
            followListData.value = res.data.data;
            console.log(followListData.value);

        }else{
            console.log('error');
        }
        
    })
}
const getfanList = async (userId)=>{
    http.get('/user/fan',{params: {'user_id': userId}}).then((res)=>{
        console.log(res);
        if(res.data.code === 200){
            fanListData.value = res.data.data;
            console.log(fanListData.value);

        }else{
            console.log('error');
        }
        
    })
}
getfollowList(userId);
getfanList(userId);
</script>

<style>
.nut-navbar {
    box-shadow: none;
    margin-top: 22px;
    border-bottom: 1px solid #dee1e6;
    margin-bottom: 10px;
}
.nut-navbar .title{
    font-size: 18px !important;
}
.nut-tabs__titles{
    background-color: #fff;
    border-bottom: 1px solid #dee1e6;
}
.nut-tabs__titles-item__text{
    font-size: 18px;
}
.nut-tabs__titles-item.active .nut-tabs__titles-item__line{
    background-color: #cdb165 !important;
}
.follows, .fans{
    display: flex;
    font-display: row;
    width: 100%;
    height: 60px;
    padding: 0px 10px;
}
.follows .user, .fans .user{
    padding-left: 20px;
}
.follows .name, .fans .name{
    font-size: 16px;
}
.follows .level, .fans .level{
    color: #cdb165;
    font-weight: bold;
    font-style: italic;
}
.follows .intro,.fans .intro{
   color: #dee1e6; 
}
</style>